<style lang="less">
  @import './unlock.less';
</style>

<template>
  <transition name="show-unlock">
    <div class="unlock-body-con" v-if="showUnlock" @keydown.enter="handleUnlock">
      <div @click="handleClickAvator" class="unlock-avator-con" :style="{marginLeft: avatorLeft}">
        <img class="unlock-avator-img" src="../assets/avatar.png">
        <div class="unlock-avator-cover">
          <span><Icon type="md-unlock" :size="30"></Icon></span>
          <p>解锁</p>
        </div>
      </div>
      <div class="unlock-avator-under-back" :style="{marginLeft: avatorLeft}"></div>
      <div class="unlock-input-con">
        <div class="unlock-input-overflow-con">
          <div class="unlock-overflow-body" :style="{right: inputLeft}">
            <input ref="inputEle" v-model="password" class="unlock-input" type="password" placeholder="密码同登录密码"/>
            <button ref="unlockBtn" @mousedown="unlockMousedown" @mouseup="unlockMouseup" @click="handleUnlock"
                    class="unlock-btn">
              <Icon color="white" type="md-key" :size="14"></Icon>
            </button>
          </div>
        </div>
      </div>
      <div class="unlock-locking-tip-con">已锁定</div>
    </div>
  </transition>
</template>

<script>
  // ;
  import axios from 'axios'
  import util from '../libs/util'
  export default {
    name: 'Unlock',
    data () {
      return {
        avatorLeft: '0px',
        inputLeft: '400px',
        password: ''
      }
    },
    props: {
      showUnlock: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      handleClickAvator () {
        this.avatorLeft = '-180px'
        this.inputLeft = '0px'
        this.$refs.inputEle.focus()
      },
      handleUnlock () {
        axios.post(util.auth, {
          'username': sessionStorage.getItem('user'),
          'password': this.password
        })
          .then(res => {
            if (res.data['token'] === 'null') {
              this.$Message.error('密码错误,请重新输入!')
            } else {
              this.avatorLeft = '0px'
              this.inputLeft = '400px'
              this.password = ''
              this.$store.commit('unlock')
              this.$emit('on-unlock')
            }
          })
      },
      unlockMousedown () {
        this.$refs.unlockBtn.className = 'unlock-btn click-unlock-btn'
      },
      unlockMouseup () {
        this.$refs.unlockBtn.className = 'unlock-btn'
      }
    }
  }
</script>
